<p><span>文本正则过滤: </span><input id="filter" value="." /></p>
<p>
  <!-- 文本输入域 -->
  <textarea id="text" placeholder="文本内容..." cols="35"></textarea>
</p>
<button id="extractText">提取节点文本</button>
<button id="extractSvg">提取节点Svg</button>
<button id="toAndroidSvg">节点转AndroidSvg</button>
<!-- 输入框内容直接转AndroidSvg -->
<button id="convertAndroidSvg">内容转AndroidSvg</button>
<!-- <button id="cancel">关闭</button> -->

<script>
  click("extractText", () => {
    parent.postMessage({ pluginMessage: { type: "extract-text" } }, "*");
  });
  click("cancel", () => {
    parent.postMessage({ pluginMessage: { type: "cancel" } }, "*");
  });
  click("extractSvg", () => {
    parent.postMessage({ pluginMessage: { type: "extractSvg" } }, "*");
  });
  click("toAndroidSvg", () => {
    parent.postMessage({ pluginMessage: { type: "toAndroidSvg" } }, "*");
  });
  click("convertAndroidSvg", () => {
    const text = document.getElementById("text").value;
    parseSvg(text);
  });

  //点击事件
  function click(id, callback) {
    const el = document.getElementById(id);
    if (!el) {
      return;
    }
    el.onclick = callback;
  }

  // 接收来自插件的消息
  window.onmessage = (event) => {
    console.log("收到消息↓");
    console.log(event.data.pluginMessage);

    const { type, texts, data } = event.data.pluginMessage;
    if (type === "selected-text") {
      //使用正则过滤texts中的数据
      var filter = document.getElementById("filter").value;
      parent.postMessage(
        { pluginMessage: { type: "putItem", data: filter } },
        "*"
      );

      var reg = new RegExp(filter, "g");
      const newTexts = [];
      texts.forEach((text, index) => {
        //文本是否包含过滤内容
        if (text && text.match(reg)) {
          //包含过滤内容，将过滤内容替换为空
          newTexts.push(`"${text}"`);
        }
      });

      document.getElementById("text").value = newTexts.join("\n");
      //选中所有文本
      //document.getElementById("text").select();
      //设置按钮文本
      document.getElementById("extractText").innerText = `${newTexts.length}`;
    } else if (type === "getItem") {
      //console.log("getItem↓");
      //console.log(data);
      if (data) {
        document.getElementById("filter").value = data;
      }
    } else if (type === "extractSvg") {
      if (data) {
        document.getElementById("text").value = data;
      }
    } else if (type === "toAndroidSvg") {
      parseSvg(data);
    }
  };

  // 解析svg字符串
  function parseSvg(data) {
    if (data) {
      //使用svg xml数据创建dom
      var parser = new DOMParser();
      var doc = parser.parseFromString(data, "image/svg+xml");
      //获取svg节点
      const svg = doc.getElementsByTagName("svg")[0];
      const viewBox = svg.getAttribute("viewBox");
      //转成Android Svg xml
      const w = svg.getAttribute("width");
      const h = svg.getAttribute("height");
      //枚举svg节点下的所有child
      const paths = tagToAndroidPath(svg);

      var vw = w;
      var vh = h;
      if (viewBox) {
        vw = viewBox.split(" ")[2];
        vh = viewBox.split(" ")[3];
      }

      var start = `<vector xmlns:android="http://schemas.android.com/apk/res/android"
              android:width="${vw}dp"
              android:height="${vh}dp"
              android:viewportWidth="${vw}"
              android:viewportHeight="${vh}">`;
      var end = `</vector>`;
      document.getElementById("text").value = start + paths.join("") + end;

      //释放内存
      doc = null;
      parser = null;
    } else {
      parent.postMessage(
        { pluginMessage: { type: "notify", data: "no data" } },
        "*"
      );
    }
  }

  //将常用的颜色字符串转成hex颜色值
  function colorToHex(color) {
    if (color === null || color === undefined) {
      return undefined;
    }
    if (color === "transparent" || color === "none") {
      return "#00000000";
    }
    if (color === "black") {
      return "#000000";
    }
    if (color === "white") {
      return "#ffffff";
    }
    if (color === "red") {
      return "#ff0000";
    }
    if (color === "green") {
      return "#00ff00";
    }
    if (color === "blue") {
      return "#0000ff";
    }
    if (color === "yellow") {
      return "#ffff00";
    }
    if (color === "cyan") {
      return "#00ffff";
    }
    if (color === "magenta") {
      return "#ff00ff";
    }
    if (color === "gray") {
      return "#808080";
    }
    if (color === "lightgray") {
      return "#d3d3d3";
    }
    if (color === "darkgray") {
      return "#a9a9a9";
    }
    if (color === "grey") {
      return "#808080";
    }
    if (color === "lightgrey") {
      return "#d3d3d3";
    }
    if (color === "darkgrey") {
      return "#a9a9a9";
    }

    if (color.indexOf("#") === 0) {
      return color;
    }
    var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(color);
    var red = parseInt(digits[2]);
    var green = parseInt(digits[3]);
    var blue = parseInt(digits[4]);
    var rgb = blue | (green << 8) | (red << 16);
    return digits[1] + "#" + rgb.toString(16);
  }

  //将数字字符串转换成浮点型数字
  function parseFloatStr(str, def = undefined) {
    if (str === null || str === undefined) {
      return def;
    }
    return parseFloat(str);
  }

  //保留3位小数点
  function toFixed(num, de = 3) {
    return parseFloat(num.toFixed(de));
  }

  //将svg标签转成Android的path标签
  function tagToAndroidPath(tag) {
    var paths = [];
    const child = tag;

    //标准属性
    const fillRule = child.getAttribute("fill-rule");
    const x = parseFloatStr(child.getAttribute("x"), 0);
    const y = parseFloatStr(child.getAttribute("y"), 0);
    const r = parseFloatStr(child.getAttribute("r"));
    var cx = parseFloatStr(child.getAttribute("cx"));
    var cy = parseFloatStr(child.getAttribute("cy"));
    const width = parseFloatStr(child.getAttribute("width"));
    const height = parseFloatStr(child.getAttribute("height"));
    const rx = parseFloatStr(child.getAttribute("rx")) || r;
    const ry = parseFloatStr(child.getAttribute("ry")) || rx;
    const fill = colorToHex(child.getAttribute("fill"));
    const stroke = colorToHex(child.getAttribute("stroke"));

    var fillSvg = "";
    if (fill) {
      var fillType = "nonZero";
      if (fillRule && fillRule === "evenodd") {
        fillType = "evenOdd";
      }
      fillSvg = `android:fillColor="${fill}" android:fillType="${fillType}"`;
    }
    var strokeSvg = "";
    if (stroke) {
      strokeSvg = `android:strokeColor="${stroke}" android:strokeWidth="1"`;
    } else if (!fillSvg) {
      //没有描边, 又没有填充的情况下, 默认黑色填充
      fillSvg = `android:fillColor="#333333" android:fillType="evenOdd"`;
    }

    if (child.tagName === "line") {
      const x1 = parseFloatStr(child.getAttribute("x1"), 0);
      const x2 = parseFloatStr(child.getAttribute("x2"), 0);
      const y1 = parseFloatStr(child.getAttribute("y1"), 0);
      const y2 = parseFloatStr(child.getAttribute("y2"), 0);
      var pathSvg = `android:pathData="M${x1},${y1}L${x2},${y2}"`;
      paths.push(`
                <path ${fillSvg} ${strokeSvg} ${pathSvg} />`);
    } else if (child.tagName === "path") {
      //获取path的d属性
      console.log(child);
      const d = child.getAttribute("d");

      var fillType = "nonZero";
      if (fillRule && fillRule === "evenodd") {
        fillType = "evenOdd";
      }

      var pathSvg = `android:pathData="${d}"`;

      paths.push(`
                <path ${fillSvg} ${strokeSvg} ${pathSvg} /> `);
    } else if (child.tagName === "rect" && !rx && !ry) {
      //获取path的d属性
      console.log(child);

      var pathSvg = "";
      if (rx && ry) {
        const r = x + width;
        const b = y + height;
        pathSvg = `android:pathData="M${x + rx},${y}h${
          width - rx * 2
        }Q${r},${y} ${r},${y + ry}v${height - ry * 2}Q${r},${b} ${
          r - rx
        },${b}h-${width - rx * 2}Q${x},${b} ${x},${b - ry}v-${
          height - ry * 2
        }Q${x},${y} ${x + rx},${y}z"`;
      } else {
        pathSvg = `android:pathData="M${x},${y}h${width}v${height}h-${width}z"`;
      }

      paths.push(`
                <path ${fillSvg} ${strokeSvg} ${pathSvg} />`);
    } else if (
      child.tagName === "ellipse" ||
      child.tagName === "circle" ||
      child.tagName === "rect"
    ) {
      const width = rx * 2;
      const height = ry * 2;
      const kappa = 0.5522848; // 4 * ((√(2) - 1) / 3)
      const ox = (width / 2.0) * kappa; // control point offset horizontal
      const oy = (height / 2.0) * kappa; // control point offset vertical
      //const xe = cx + width / 2.0; // x-end
      //const ye = cy + height / 2.0; // y-end

      if (child.tagName === "rect") {
        cx = x + width / 2.0;
        cy = y + height / 2.0;
      }

      var pathSvg = "";
      pathSvg = `android:pathData="M${cx - width / 2},${cy}C${cx - width / 2},${
        cy - oy
      } ${cx - ox},${cy - height / 2} ${cx},${cy - height / 2}C${cx + ox},${
        cy - height / 2
      } ${cx + width / 2},${cy - oy} ${cx + width / 2},${cy}C${
        cx + width / 2
      },${cy + oy} ${cx + ox},${cy + height / 2} ${cx},${cy + height / 2}C${
        cx - ox
      },${cy + height / 2} ${cx - width / 2},${cy + oy} ${cx - width / 2},${cy}"
              `;

      paths.push(`
              <path ${fillSvg} ${strokeSvg} ${pathSvg} />`);
    } else if (child.tagName === "g" || child.tagName === "svg") {
      const children = child.children;
      for (let i = 0; i < children.length; i++) {
        const child = children[i];
        const array = tagToAndroidPath(child);
        if (array) {
          paths = paths.concat(array);
        }
      }
    } else if (child.tagName === "defs") {
    } else {
      const msg = "不支持的SVG标签: " + child.tagName;
      console.log(msg);
      parent.postMessage({ pluginMessage: { type: "notify", data: msg } }, "*");
    }

    return paths;
  }
</script>
<!-- 样式 -->
<style>
  body {
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #333;
    margin: 12px 12px;
    outline: none;
  }
  *:focus {
    outline-color: #30afe6;
  }
  input {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 4px;
    box-sizing: border-box;
  }
  textarea {
    width: 100%;
    height: 74%;
    padding: 4px 4px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  button {
    margin-top: 2px;
    padding: 4px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
  }
</style>
